<script>
import { getMembersNum } from "@/api/members/teaching";
import { quitFlowable } from "@/api/members/management";
import { deptTreeSelect } from "@/api/system/user";

export default {
  name: "MembersQuit",
  data() {
    return {
      loading: false,
      member: {},
      unionName: "",
      deptTree: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.loading = true;
      try {
        const [m, d] = await Promise.all([getMembersNum(), deptTreeSelect()]);
        this.member = m.data || {};
        this.deptTree = d.data || [];
        this.unionName = this.findDeptPath(this.deptTree, this.member.deptId);
      } finally {
        this.loading = false;
      }
    },
    findDeptPath(tree, targetId, path = []) {
      for (const node of tree || []) {
        const newPath = [...path, node.label];
        if (node.id === targetId) return newPath.join(" / ");
        if (node.children && node.children.length) {
          const found = this.findDeptPath(node.children, targetId, newPath);
          if (found) return found;
        }
      }
      return "";
    },
    async submitQuit() {
      if (!this.member || !this.member.membersId) {
        this.$message.error("未获取到会员信息");
        return;
      }
      try {
        await quitFlowable(this.member);
        this.$message.success("退会申请已提交，等待审批");
      } catch (e) {}
    },
  },
};
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>退回申请</span>
      </div>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="姓名">{{ member.membersName }}</el-descriptions-item>
        <el-descriptions-item label="工号">{{ member.membersNum }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ member.membersTel }}</el-descriptions-item>
        <el-descriptions-item label="所在工会">{{ unionName || '-' }}</el-descriptions-item>
      </el-descriptions>

      <div style="margin-top: 16px;">
        <el-button type="primary" @click="submitQuit">退会审批</el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}
</style>
